<!-- src/components/WangEditor/index.vue -->
<template>
  <div class="editorBox">
    <!-- 工具栏 -->
    <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" style="border-bottom: 1px dashed #ccc" :mode="mode" />
    <!-- 功能栏 -->
    <div class="editor-actions">
      <el-select v-model="publishType" placeholder="请选择发布类型" size="small" style="width: 140px">
        <el-option label="公开" value="public" />
        <el-option label="私有" value="private" />
        <el-option label="草稿" value="draft" />
      </el-select>
      <el-button size="small" @click="handleClear" type="warning" plain>清空</el-button>
      <el-button size="small" @click="handlePublish" type="primary">发布</el-button>
      <el-button size="small" @click="handlePreview" type="info" plain>预览</el-button>
    </div>
    <!-- 编辑器 -->
    <Editor :defaultConfig="editorConfig" v-model="defaultHtml" @onChange="handleChange" :mode="mode"
      style="min-height: 500px" @onCreated="handleCreated" />
    <el-dialog v-model="previewVisible" title="内容预览" width="60%">
      <Editor :defaultConfig="{
        readOnly: true
      }" v-model="previewHtml" style="min-height: 500px" readOnly />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {
  onBeforeUnmount,
  shallowRef,
  reactive,
  toRefs,
  getCurrentInstance,
} from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { addfile } from "@/api/serveFile/index";
import '@wangeditor/editor/dist/css/style.css'
import { ElMessage } from "element-plus";
const { proxy }: any = getCurrentInstance();

const props = defineProps({
  modelValue: {
    type: [String],
    default: "",
  },
  imageNums: {
    //限制上传图片数量
    type: Number,
    default: 1,
  },
});
const blobFileMap = new Map<string, File>();
const emit = defineEmits(["update:modelValue", "savePublic"]);

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

const state = reactive({
  // 工具栏配置
  toolbarConfig: {
    excludeKeys: ["uploadVideo", "emotion"],
  },
  editorConfig: {
    placeholder: "请输入内容...",
    MENU_CONF: {
      uploadImage: {
        // 自定义图片上传
        async customUpload(file: any, insertFn: any) {
          // 方式一：使用 URL.createObjectURL
          const localUrl = URL.createObjectURL(file);
          blobFileMap.set(localUrl, file); // 保存映射
          insertFn(localUrl);

          // 方式二：如需 base64，可用 FileReader
          // const reader = new FileReader();
          // reader.onload = (e) => {
          //   insertFn(e.target?.result as string);
          // };
          // reader.readAsDataURL(file);
        },
      },
    },
  },
  defaultHtml: props.modelValue,
  mode: "default",
});

const { toolbarConfig, editorConfig, defaultHtml, mode } = toRefs(state);
const previewEditorConfig = {
  readOnly: true
};
const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

function handleChange(editor: any) {
  emit("update:modelValue", editor.getHtml());
}
const previewVisible = ref(false);
const previewHtml = ref(""); // 新增
function handlePreview() {
  previewHtml.value = defaultHtml.value; // 赋值
  previewVisible.value = true;
}
const publishType = ref("public");
function handleClear() {
  defaultHtml.value = "";
  blobFileMap.clear();
  ElMessage.success("内容已清空");
}
async function handlePublish() {
  emit("savePublic", {
    blobFileMap,
    publishType: publishType.value
  });
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  defaultHtml.value = "";
  blobFileMap.clear();
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
// 去掉视频背景样式
:deep(.w-e-textarea-video-container) {
  background: none;
  border: none;
}

//去掉图片拖拉拽编辑
:deep(.w-e-image-dragger) {
  display: none;
}

//全屏层级给最高
:deep(.w-e-full-screen-container) {
  z-index: 999 !important;
}

.editorBox {
  z-index: 999;
  border-radius: 20px;
  padding: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px dashed #ccc;
  //   height: 500px;
}

.editor-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px 0;
  padding-left: 2px;
}

:deep(h5),
.h5 {
  font-size: 14px;
}

:deep(h4),
.h4 {
  font-size: 16px;
  font-weight: bold;
}

:deep(h3),
.h3 {
  font-size: 18px;
  font-weight: bold;
}

:deep(h2),
.h2 {
  font-size: 20px;
  font-weight: bold;
}

:deep(h1),
.h1 {
  font-size: 22px;
  font-weight: bold;
}

:deep(i) {
  font-style: italic;
}

:deep(.w-e-toolbar .w-e-menu i) {
  font-style: normal;
}

:deep(ol) {
  margin: 10px 0 10px 22px;
  list-style-type: decimal;
}

:deep(ul) {
  margin: 10px 0 10px 22px;
  list-style-type: disc;
}

:deep(table) {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

:deep(table td),
:deep(table th) {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
  height: 32px;
}

:deep(table th) {
  border-bottom: 2px solid #ccc;
  text-align: center;
  background-color: #f1f1f1;
}

:deep(blockquote) {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  min-height: 24px;
  font-size: 100%;
  background-color: #f1f1f1;
}

:deep(code) {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}

:deep(pre code) {
  display: block;
}

:deep(a) {
  color: #5592e5;
}
</style>
<style>
.w-e-text-container .w-e-scroll {
  min-height: 500px !important;
  -webkit-overflow-scrolling: touch;
}
</style>
